<template>
  <div>
    <!-- UPS -->
    <div class="overview-modal" id="622" v-show="resourceTypeId == '622'">
      <div v-for="item in listData" style="margin-top: 5px;">
        {{ item.columnComments }}：{{ item.columnValue }}
      </div>
    </div>

    <!-- 机柜 -->
    <div
      class="overview-modal modal1"
      id="403"
      v-show="resourceTypeId == '403'"
    >
      <div class="modal-titile">机柜信息</div>
      <div
        v-for="(item, index) in listData"
        v-if="index < 2"
        style="margin-top: 5px;"
      >
        {{ item.columnComments }}：{{ item.columnValue }}
      </div>
      <div class="flex">
        <div
          :class="['block', 'flex', 'color' + index]"
          v-for="(item, index) in listData"
          v-if="index > 1"
        >
          <div class="back">
            <img
              :src="getModal1Icon('icon' + index)"
              width="15"
              height="15"
              alt=""
              srcset=""
            />
          </div>
          <div style="margin-left: 5px;">
            <div class="text-color">
              {{ item.columnValue }} {{ index == 6 ? "%" : "" }}
            </div>
            <div class="text-ov">{{ item.columnComments }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 门禁 -->
    <div
      class="overview-modal modal3 flex"
      id="642"
      v-show="resourceTypeId == '642'"
    >
      <div class="left-bg felx-center">
        <img
          src="../../assets/computerRoom/modal/icon642.png"
          width="11"
          height="20"
          alt=""
          srcset=""
        />
      </div>
      <div>
        <div v-for="item in listData" style="margin-top: 5px;">
          {{ item.columnComments }}：{{ item.columnValue }}
        </div>
      </div>
    </div>

    <!-- 漏水 -->
    <div
      class="overview-modal modal4 flex"
      id="643"
      v-show="resourceTypeId == '643'"
    >
      <div class="left-bg felx-center">
        <img
          src="../../assets/computerRoom/modal/icon643.png"
          width="11"
          height="20"
          alt=""
          srcset=""
        />
      </div>
      <div>
        <div v-for="item in listData" style="margin-top: 5px;">
          {{ item.columnComments }}：{{ item.columnValue }}
        </div>
      </div>
    </div>

    <!-- 空调-->
    <div
      class="overview-modal modal5 flex"
      id="646"
      v-show="resourceTypeId == '646'"
    >
      <div class="left-bg felx-center">
        <img
          src="../../assets/computerRoom/modal/icon646.png"
          width="11"
          height="20"
          alt=""
          srcset=""
        />
      </div>
      <div>
        <div v-for="item in listData" style="margin-top: 5px;">
          {{ item.columnComments }}：{{ item.columnValue }}
        </div>
      </div>
    </div>

    <!-- 蓄电池 -->
    <div
      class="overview-modal modal6"
      id="156"
      v-show="resourceTypeId == '156'"
    >
      <div v-for="item in listData" style="margin-top: 5px;">
        {{ item.columnComments }}：{{ item.columnValue }}
      </div>
    </div>

    <!-- 温湿度 -->
    <div
      class="overview-modal modal2 flex"
      id="644"
      v-show="resourceTypeId == '644'"
    >
      <div class="left-bg felx-center">
        <img
          src="../../assets/computerRoom/modal/icon644.png"
          width="11"
          height="20"
          alt=""
          srcset=""
        />
      </div>
      <div>
        <div v-for="item in listData" style="margin-top: 5px;">
          {{ item.columnComments }}：{{ item.columnValue }}
        </div>
      </div>
    </div>

    <!-- 供电 -->
    <div
      class="overview-modal modal8"
      id="628"
      v-show="resourceTypeId == '628'"
    >
      <div v-for="item in listData" style="margin-top: 5px;">
        {{ item.columnComments }}：{{ item.columnValue }}
      </div>
    </div>
  </div>
</template>
<script>
import { totalCurrentData } from "@/api/computerRoomApi.js";
export default {
  // props: {
  //   type: {
  //     type: String,
  //     required: true
  //   },
  //   data: {
  //     type: Object,
  //     required: true
  //   },
  //   show: {
  //     type: Boolean,
  //     default: false
  //   },
  // },
  data() {
    return {
      keyid: "",
      attrid: "",
      mouseEvent: {},
      resourceTypeId: "",
      listData: [],
    };
  },
  mounted() {},
  computed: {
    // getresourceTypeId() {
    //   if (this.resourceTypeId) {
    //     switch (this.resourceTypeId) {
    //       case value:
    //         break;
    //       default:
    //         break;
    //     }
    //   }
    // }
  },
  methods: {
    setOid(keyid, attrid, mouseEvent) {
      this.keyid = keyid;
      this.attrid = attrid;
      this.mouseEvent = mouseEvent;
      // this.deviceName = '数据加载中';
      // // this.activeTab = 'current';
      // this.tableLoading = true;
      // this.open = true;
      // this.paramsData = [];
      // this.controlText = '';
      // this.controlData = [];
      // this.currentData = [];
      // this.stdTree[0].children = [];
      this.getData(keyid, attrid);
    },
    getModal1Icon(icon) {
      return require(`../../assets/computerRoom/modal/${icon}.png`);
    },

    async getData(keyid, attrid) {
      console.log(keyid, attrid);
      const res = await totalCurrentData({
        XRtOidAttrs: keyid + "," + attrid,
      });
      if (res.code == "200") {
        if (!res.info[0]) {
          return;
        }
        this.resourceTypeId = res.info[0].resourceTypeId;
        this.listData = res.info;
        const { offsetX, offsetY } = this.mouseEvent;
        // const y = mouseEvent.offsetY;
        let modalel = document.getElementById(this.resourceTypeId);
        if (modalel) {
          modalel.style.left = offsetX + 17 + "px";
          modalel.style.top = offsetY + 10 + "px";
        }
      }
    },
  },
};
</script>
<style lang="scss">
.overview-modal {
  background: rgba(0, 0, 0, 0.75);
  box-shadow: 1px 2px 7px 0px rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  font-size: 12px;
  color: #fff;
  position: absolute;
  min-width: 80px;
  min-height: 52px;
  padding: 10px;

  &.modal1 {
    width: 40%;

    .modal-titile {
      font-size: 18px;
      position: relative;
      margin-bottom: 10px;

      &::after {
        content: "";
        width: 105%;
        height: 1px;
        background: rgba(240, 240, 240, 0.6);
        position: absolute;
        left: -10px;
        bottom: -3px;
      }
    }

    > .flex {
      flex-wrap: wrap;
      margin: 10px auto 0;
    }

    .block {
      margin: 0 3% 20px 0;
      border: 1px solid #f0f0f0;
      box-shadow: 5px 0px 10px 0px rgba(165, 199, 194, 0.2);
      border-radius: 6px;
      width: 48%;
      padding: 6px 10px;

      &:nth-child(2n) {
        margin-right: 0;
      }

      &:nth-child(5),
      &:nth-child(6) {
        margin-bottom: 0;
      }

      .text-color {
        font-size: 18px;
        font-weight: 500;
      }

      .text-ov {
        width: 80px;
      }

      .back {
        width: 40px;
        height: 40px;
        background: #21b795;
        border-radius: 50%;
        position: relative;
        flex-shrink: 0;

        img {
          display: block;
          margin: 12px auto 0;
        }
      }
    }

    .color2 {
      .back {
        background: #21b795;
      }

      .text-color {
        color: #21b795;
      }
    }

    .color3 {
      .back {
        background: #1bbedc;
      }

      .text-color {
        color: #1bbedc;
      }
    }

    .color4 {
      .back {
        background: #b833f0;
      }

      .text-color {
        color: #b833f0;
      }
    }

    .color5 {
      .back {
        background: #e79800;
      }

      .text-color {
        color: #e79800;
      }
    }

    .color6 {
      .back {
        background: #17c700;
      }

      .text-color {
        color: #17c700;
      }
    }

    .color7 {
      .back {
        background: #ef6e6e;
      }

      .text-color {
        color: #ef6e6e;
      }
    }
  }

  .felx-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .left-bg {
    border-radius: 2px;
    margin-right: 5px;
    height: inherit;
  }

  &.modal2 {
    .left-bg {
      width: 29px;
      // height: 90%;
      background: #21b794;
    }
  }

  &.modal3 {
    .left-bg {
      width: 29px;
      // height: 90%;
      background: #7d4ada;
    }
  }

  &.modal4 {
    .left-bg {
      width: 29px;
      // height: 90%;
      background: #cba227;
    }
  }

  &.modal5 {
    .left-bg {
      width: 29px;
      // height: 90%;
      background: #009ae9;
    }
  }

  .flex {
    display: flex;
  }
}
</style>
